<template>
  <div>
    <el-dialog
      width="740px"
      :title="dialogTitle"
      :visible.sync="dialogVisible"
      :before-close="tableClose"
      
      >
        <el-form
          :rules="formRules"
          label-position="right"
          :model="addInfo"
          label-width="120px"
          ref="formRef"
          inline
        >
          <el-form-item prop="supplierName" label="供应商名称：" size="mini">
            <el-select
                v-model="addInfo.supplierName"
                placeholder="请选择"
              >
                <el-option
                  v-for="(item) in supplierNameList"
                  :key="item.id"
                  :label="item.name"
                  :value="item.name"
                >
                </el-option>
              </el-select>
          </el-form-item>
          <el-form-item prop="materialName" label="原辅料名称：" size="mini">
            <el-select
                v-model="addInfo.materialName"
                placeholder="请选择"
                @change="changeSomething"
              >
                <el-option
                  v-for="(item) in MaterialNameList"
                  :key="item.id"
                  :label="item.name"
                  :value="item"
                >
                </el-option>
              </el-select>
          </el-form-item>
          <el-form-item prop="specification" label="规格：" size="mini">
            <el-input v-model="addInfo.specification" :disabled="true"></el-input>
          </el-form-item>
          <el-form-item prop="price" label="单价：" size="mini">
            <el-input v-model="addInfo.price" :disabled="true">
              <el-button slot="append">元</el-button>
            </el-input>
          </el-form-item>
          <el-form-item prop="count" label="数量：" size="mini">
            <el-input v-model="addInfo.count"></el-input>
          </el-form-item>
          <el-form-item prop="registrant" label="操作人：" size="mini">
            <el-select
                v-model="addInfo.registrant"
                placeholder="请选择"
              >
                <el-option
                  v-for="(item) in staffInfoList"
                  :key="item.id"
                  :label="item.username"
                  :value="item.username"
                >
                </el-option>
              </el-select>
          </el-form-item>
          <el-form-item prop="enterTime" label="入库时间：" size="mini">
            <el-date-picker 
              :picker-options="pickerOptions" 
              v-model="addInfo.enterTime"
              type="datetime"
              format="yyyy-MM-dd HH:mm:ss" 
              value-format="yyyy-MM-dd HH:mm:ss"
              >
            </el-date-picker>
          </el-form-item>
        </el-form>
        <span slot="footer" class="dialog-footer">
          <el-button @click="closeform()">取 消</el-button>
          <el-button type="primary" @click="addMaterInfo">{{message}}</el-button>
        </span>
    </el-dialog>
  </div>
</template>

<script>
import {mapState,mapActions} from 'vuex'
import {
  addMaterialInfo,
  getMaterialName,
  getsupplierInfoBypage,
} from '../../../Api/processingplant/process_material_enter_info'

export default {
  name:'FromInfo',
  inject: ["reload"],
  props:{
    //是否打开表单
    dialogVisible:{
      Boolean,
      default:false
    },
    TypeList:{
      Array
    },
    pickerOptions:{
      Object
    },
    //表头
    dialogTitle:{
      String
    },
    message:{
      String
    }
  },
  
  data(){
    return{
      addInfo:{
        count:'',
        craftName:'',
        enterTime:'',
        materialName:'',
        price:'',
        registrant:'',
        specification:'',
        supplierName:''
      },
      formRules:{
        enterTime:[
          {
            required: true,
            message: `请输入入库时间`,
            trigger: "blur"
          }
        ],
        registrant:[
          {
            required: true,
            message: `请输入登记人`,
            trigger: "blur"
          }
        ],
        supplierName:[
          {
            required: true,
            message: `请选择供应商名称`,
            trigger: "blur"
          }
        ],
        count:[
          {
            required: true,
            message: `请输入数量`,
            trigger: "blur"
          }
        ],
        materialName:[
          {
            required: true,
            message: `请选择原辅料名称`,
            trigger: "blur"
          }
        ],
        price:[
          {
            required: true,
            message: `请输入单价`,
            trigger: "blur"
          }
        ],
        specification:[
          {
            required: true,
            message: `请输入规格`,
            trigger: "blur"
          }
        ]
      },
      MaterialNameList:[],//所有原辅料名称
      supplierNameList:[], //所有供应商名称
      value:''
    }
  },
  computed:{
    ...mapState({
      staffInfoList: (state) => state.roleInfo.staffInfo,//企业员工信息
    })
  },
  created(){
    this.initDate()
    this.setMaterialNameList()
    this.setsupplierNameList()
  },
  methods:{
    ...mapActions("roleInfo",["getAllStaffInfo"]),
    initDate(){
      if(!this.staffInfoList){
        getAllStaffInfo();
      }
    },
    // 关闭弹窗
    tableClose() {
      this.$confirm('确认关闭？').then(() => {
          this.closeform();
        }).catch(() => {});
    },
    //选择原辅料名称后自动填充规格和价格
    changeSomething(item){
      this.addInfo.materialName = item.name;
      this.addInfo.price = item.price;
      this.addInfo.specification = item.specification;
    },
    //设置入库时间为当前时间
    getdatatime(){//默认显示今天
      var d = new Date();
      var year = d.getFullYear();//得到年
      var month = (d.getMonth()+1)<10 ? '0'+(d.getMonth()+1) : (d.getMonth()+1);//得到月
      var day = d.getDate()<10 ? '0'+d.getDate() : d.getDate();//得到日
      var hour = d.getHours()<10 ? '0'+d.getHours() : d.getHours();//得到时
      var minute = d.getMinutes()<10 ? '0'+d.getMinutes() : d.getMinutes();//得到分
      var second = d.getSeconds()<10 ? '0'+d.getSeconds() : d.getSeconds();//得到秒
      this.addInfo.enterTime = [year, month, day].join('-') + " " + [hour, minute, second].join(':');//格式为：YY-MM-DD hh:mm:ss（当前时间）
    },
    //选择入库类型
    changeEvent(index) {
      console.log(index);
      addInfo.enterType = this.TypeList[index].type;
    },
    
    //  添加原辅料入库信息
    addMaterInfo() {
      this.$refs["formRef"].validate(async(valid)=>{
        if(valid){
          console.log("kkk", this.addInfo);
          const { data: res } = await addMaterialInfo(this.addInfo);
          console.log(res);
          if (res.statusCode === 20000) {
            this.$message.success("增加成功");
            this.dialogVisible = false;
            this.addInfo = {};
          } else {
            if (res.data == null) {
              return this.$message.error("添加失败");
            }
          }
          this.reload();
        }else{
          return this.$message.error("请输入完整信息");
        }
      })
    },
    //查询所有原辅料名称
    async setMaterialNameList() {
      const { data: res } = await getMaterialName();
      // console.log("哈哈哈哈哈",res)
      this.MaterialNameList = res.data;

    },
    //查询所有供应商名称
    async setsupplierNameList() {
      const { data: res } = await getsupplierInfoBypage();
      // console.log("啦啦啦啦啦啦啦",res)
      this.supplierNameList = res.data;
    },
    // 关闭编辑表单弹窗
    closeform() {
      this.$emit("closeDialog");
    },
  },
  mounted() {
    let that = this;
    that.getdatatime()
  }

}

</script>

<style scoped>
  
</style>